<template>
  <div class="admin-dashboard">
    <h1 class="page-title">
      <el-icon><Setting /></el-icon>
      管理后台
    </h1>

    <!-- 概览统计 -->
    <div class="stats-overview mb-20">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card users-card">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="stats-info">
                <h3>{{ overviewStats.users?.total || 0 }}</h3>
                <p>总用户数</p>
                <span class="stats-extra">活跃: {{ overviewStats.users?.active || 0 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card progress-card">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stats-info">
                <h3>{{ overviewStats.progress?.completionRate || 0 }}%</h3>
                <p>学习完成率</p>
                <span class="stats-extra">{{ overviewStats.progress?.completed || 0 }}/{{ overviewStats.progress?.total || 0 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card checkin-card">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="stats-info">
                <h3>{{ overviewStats.checkins?.today || 0 }}</h3>
                <p>今日打卡</p>
                <span class="stats-extra">总计: {{ overviewStats.checkins?.total || 0 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card resources-card">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><FolderOpened /></el-icon>
              </div>
              <div class="stats-info">
                <h3>{{ overviewStats.resources?.total || 0 }}</h3>
                <p>学习资源</p>
                <span class="stats-extra">今日注册: {{ overviewStats.users?.todayRegistrations || 0 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快速操作 -->
    <el-card class="quick-actions mb-20">
      <template #header>
        <div class="card-header">
          <el-icon><Lightning /></el-icon>
          <span>快速操作</span>
        </div>
      </template>
      
      <el-row :gutter="16">
        <el-col :xs="24" :sm="8" :md="6">
          <el-button type="primary" class="action-btn" @click="$router.push('/admin/users')">
            <el-icon><User /></el-icon>
            用户管理
          </el-button>
        </el-col>
        <el-col :xs="24" :sm="8" :md="6">
          <el-button type="success" class="action-btn" @click="$router.push('/admin/progress')">
            <el-icon><TrendCharts /></el-icon>
            学习统计
          </el-button>
        </el-col>
        <el-col :xs="24" :sm="8" :md="6">
          <el-button type="warning" class="action-btn" @click="$router.push('/admin/resources')">
            <el-icon><FolderOpened /></el-icon>
            资源管理
          </el-button>
        </el-col>
        <el-col :xs="24" :sm="8" :md="6">
          <el-button type="info" class="action-btn" @click="exportData">
            <el-icon><Download /></el-icon>
            数据导出
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据图表 -->
    <el-row :gutter="20">
      <!-- 用户注册趋势 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <el-icon><TrendCharts /></el-icon>
              <span>用户注册趋势</span>
            </div>
          </template>
          <div id="registration-chart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      
      <!-- 打卡统计 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <el-icon><Calendar /></el-icon>
              <span>打卡活跃度</span>
            </div>
          </template>
          <div id="checkin-chart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新活动 -->
    <el-card class="recent-activities">
      <template #header>
        <div class="card-header">
          <el-icon><Clock /></el-icon>
          <span>最新活动</span>
        </div>
      </template>
      
      <el-timeline>
        <el-timeline-item
          v-for="activity in recentActivities"
          :key="activity.id"
          :timestamp="activity.time"
          :type="activity.type"
        >
          <p>{{ activity.content }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/utils/api'

// 状态数据
const overviewStats = ref({})
const recentActivities = ref([
  {
    id: 1,
    content: '新用户 张同学 注册了账户',
    time: '2024-01-20 10:30',
    type: 'primary'
  },
  {
    id: 2,
    content: '李同学 完成了第5天的学习任务',
    time: '2024-01-20 09:15',
    type: 'success'
  },
  {
    id: 3,
    content: '管理员添加了新的学习资源',
    time: '2024-01-19 16:45',
    type: 'warning'
  },
  {
    id: 4,
    content: '王同学 连续打卡达到7天',
    time: '2024-01-19 14:20',
    type: 'info'
  }
])

// 加载概览统计
const loadOverviewStats = async () => {
  try {
    const response = await api.get('/admin/statistics/overview')
    if (response.data.success) {
      overviewStats.value = response.data.data
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
    ElMessage.error('加载统计数据失败')
  }
}

// 数据导出
const exportData = () => {
  ElMessage.info('数据导出功能开发中...')
}

// 初始化图表
const initCharts = () => {
  // 这里可以使用 ECharts 或其他图表库
  // 暂时留空，实际项目中可以添加图表实现
}

// 组件挂载
onMounted(() => {
  loadOverviewStats()
  initCharts()
})
</script>

<style scoped>
.admin-dashboard {
  padding: 0;
}

/* 通用样式 */
.mb-20 {
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
}

.page-title .el-icon {
  margin-right: 12px;
  color: #409eff;
  font-size: 28px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #409eff;
}

/* 统计卡片 */
.stats-overview {
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 12px;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.users-card .stats-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.progress-card .stats-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.checkin-card .stats-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.resources-card .stats-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-info h3 {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 600;
  color: #303133;
}

.stats-info p {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #606266;
}

.stats-extra {
  font-size: 12px;
  color: #909399;
}

/* 快速操作 */
.quick-actions {
  margin-bottom: 24px;
}

.action-btn {
  width: 100%;
  height: 50px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 图表卡片 */
.chart-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 最新活动 */
.recent-activities {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 20px;
  }
  
  .stats-content {
    padding: 16px;
  }
  
  .stats-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-right: 12px;
  }
  
  .stats-info h3 {
    font-size: 24px;
  }
  
  .action-btn {
    height: 44px;
    font-size: 13px;
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .admin-dashboard {
    padding: 0 10px;
  }
  
  .stats-content {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .stats-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
}
</style> 